import React, { Component } from 'react';
import { Form, Input, Button, Select } from 'antd';
import { FormOne } from '../interface/oneFace';

const { Option } = Select;
 export default class FormTwo extends Component<FormOne, any>{

    constructor(props:FormOne){
        super(props);
        console.log(props, '哈哈哈');
        this.setFormItem();
    }

    layout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 15 },
    };

    formRefs = React.createRef<any>();

    onGenderChange = (value: string) => {
        console.log(this.formRefs.current);
        this.formRefs.current.setFieldsValue({
            "email": value,
        })
    }

    changeTab = () => {
        this.props.changeTab(0);
        let obj = JSON.parse(JSON.stringify(this.props));
        delete obj.changeTab;
        delete obj.setForm;
        this.props.setForm(obj);
     }

    onFinish = (value: FormOne) => {
        console.log(value);
        let nextData = {...this.props, ...value};
        this.props.changeTab(2);
        this.props.setForm(nextData);

    };

    setFormItem = () => {
        setTimeout(() => {
            if(this.props.bankName){
                this.formRefs.current.setFieldsValue({
                    'bankName': this.props.bankName
                });
            }
            if(this.props.linkPerson){
                this.formRefs.current.setFieldsValue({
                    'linkPerson': this.props.linkPerson
                });
            }
        })
    }

    render() {
        return (
            <Form onFinish={this.onFinish}  ref={this.formRefs} {...this.layout}>
                <Form.Item name='bankName' label="bankName" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name='linkPerson' label="linkPerson">
                    <Select defaultValue="lucy" style={{ width: 120 }} onChange = {this.onGenderChange}>
                        <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                        <Option value="tom" >tom</Option>
                        <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                </Form.Item>
                <Form.Item wrapperCol={{ ...this.layout.wrapperCol, offset: 8 }}>
                    <Button className="cancalBtn" onClick={this.changeTab}>上一步</Button>
                    <Button type="primary" htmlType="submit">
                        下一步
                    </Button>
                </Form.Item>
            </Form>
        )
    }
}
